<template>
  <div class="intro-duce animation-opacity">
    <RotationChart />
    <div class="to">
      <TouTiao />
      <div class="introduce_title">专业介绍</div>
      <div class="introduce" v-for="it in zhuanyejiaoshaoDates" :key="it.id">
        <LoadingComponent v-slot="{loadingFlag}" class="introduce_top" v-for="its in 1" :key="it.items[its].id">
          <img :src="it.items[its].img" v-if="loadingFlag" />
          <span>
            <p style="color: rgb(1, 153, 237); display: inline-block">
              {{ it.items[its].name }}
            </p>
            {{ it.items[its].title }}
          </span>
        </LoadingComponent>
        <LoadingComponent v-slot="{loadingFlag}" class="introduce_bot">
          <div
            v-for="its in 2"
            :key="it.items[its].id"
            :class="
              it.items[its].id === 1 ? 'introduce_bot_lef' : 'introduce_bot_rig'
            "
          >
            <img :src="it.items[its].img" v-if="loadingFlag" />
            <span>
              <p style="color: rgb(1, 153, 237); display: inline-block">
                {{ it.items[its].name }}
              </p>
              {{ it.items[its].title }}
            </span>
          </div>
        </LoadingComponent>
      </div>
      <!-- 特色 -->
      <div class="ico" v-show="!hideFlag" v-on:click="hideFun">
        <svg
          t="1647263426873"
          viewBox="0 0 1474 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4276"
          width="20"
          height="20"
          class="icon"
        >
          <path
            data-v-0d7103ff=""
            d="M736.914286 1024h-29.257143L49.371429 687.542857c-43.885714-14.628571-58.514286-58.514286-43.885715-87.771428 14.628571-29.257143 43.885714-58.514286 87.771429-29.257143L736.914286 877.714286l643.657143-321.828572c29.257143-14.628571 73.142857 0 87.771428 29.257143 14.628571 29.257143 0 73.142857-29.257143 87.771429L766.171429 1024H736.914286z m0-555.885714h-29.257143L49.371429 131.657143C5.485714 117.028571-9.142857 73.142857 5.485714 43.885714 20.114286 0 64-14.628571 93.257143 0L736.914286 321.828571 1380.571429 0c29.257143-14.628571 73.142857 0 87.771428 43.885714 14.628571 29.257143 0 73.142857-29.257143 87.771429L766.171429 468.114286H736.914286z"
            p-id="4277"
          ></path>
        </svg>
      </div>
      <div class="clickConsulting" v-show="hideFlag">
        <a
          href="https://p.qiao.baidu.com/cps/chat?siteId=17865090&userId=39789408&siteToken=1592882751da134d1450a7e08b16ffcb"
          >点击咨询了解更多</a
        >
      </div>
      <div class="introduce_title">专业特色</div>
      <LoadingComponent v-slot="{loadingFlag}" class="characteristic" v-for="it in zhuanyeteseDates" :key="it.id">
        <div class="characteristic_Con1box">
          <div class="characteristic_Con1box_one">
            <img :src="it.img" v-if="loadingFlag" />
          </div>
          <div class="characteristic_Con1box_two">
            <p style="color: rgb(1, 153, 237)">{{ it.name }}</p>
            <span>{{ it.title }}</span>
            <a
              href="https://p.qiao.baidu.com/cps/chat?siteId=17865090&userId=39789408&siteToken=1592882751da134d1450a7e08b16ffcb"
              >在线咨询</a
            >
          </div>
        </div>
        <div class="characteristic_Con1box_list">
          <LoadingComponent
            v-slot="{loadingFlag}"
            class="characteristic_Con1box_list1"
            v-for="its in it.items"
            :key="its.id"
          >
            <img :src="its.img" v-if="loadingFlag" />
            <div class="characteristic_Con1box_list_two">
              <span>{{ it.name }}</span>
              <a
                href="https://p.qiao.baidu.com/cps/chat?siteId=17865090&userId=39789408&siteToken=1592882751da134d1450a7e08b16ffcb"
                >在线咨询</a
              >
            </div>
          </LoadingComponent>
        </div>
      </LoadingComponent>
      <div class="introduce_title">专业课程</div>
    </div>
    <div class="curriculum_Box1">
      <div class="curriculum_Box1_link">
        <span
          v-for="it in zhuanyekechengDates"
          :key="it.id"
          :class="indx === it.id ? 'span' : ''"
          v-on:click="indx = it.id"
          >{{ it.name }}</span
        >
      </div>
      <LoadingComponent
        v-slot="{loadingFlag}"
        class="curriculum_Box1_view"
        v-for="it in zhuanyekechengDates"
        :key="it.id"
        v-show="indx === it.id ? true : false"
      >
        <img :src="it.img" v-if="loadingFlag" />
        <p class="po">{{ it.name }}</p>
        <span class="so">
          {{ it.title }}
        </span>
      </LoadingComponent>
      <div class="clickConsulting">
        <a
          href="https://p.qiao.baidu.com/cps/chat?siteId=17865090&userId=39789408&siteToken=1592882751da134d1450a7e08b16ffcb"
          >点击咨询了解更多</a
        >
      </div>
    </div>
    <LoadingComponent v-slot="{ loadingFlag }" class="status_con">
      <img src="/img/报名条件.7c214866.jpg" v-if="loadingFlag" />
    </LoadingComponent>
    <LoadingComponent v-slot="{ loadingFlag }" class="ent">
      <img src="/img/报名流程.960607ac.jpg" v-if="loadingFlag" />
    </LoadingComponent>
    <div class="to">
      <QiYeHeZuo />
    </div>
    <MsBm />
    <ImportantNotices />
    <Footer />
  </div>
</template>
<script setup>
import RotationChart from "../../components/RotationChart/index.vue";
import TouTiao from "../../components/TouTiao/index.vue";
import QiYeHeZuo from "../../components/QiYeHeZuo/index.vue";
import { axiosFun } from "../../axios/index.js";
import MsBm from "../../components/MsBm/index.vue";
import Footer from "../../components/Footer/index.vue";
import ImportantNotices from "../../components/ImportantNotices/index.vue";
import { ref } from "vue";
const zhuanyejiaoshaoDates = ref([]);
const zhuanyeteseDates = ref({});
var zhuanyejiaoshaoDatess = [];
const zhuanyekechengDates = ref({});
const hideFlag = ref("false");
const indx = ref(0);
const hideFun = (v) => {
  hideFlag.value = !hideFlag.value;
  zhuanyejiaoshaoDates.value = hideFlag.value
    ? zhuanyejiaoshaoDatess
    : [zhuanyejiaoshaoDatess[0]];
};
(async (v) => {
  const { data } = await axiosFun().post("/JSON/zhuanyejiaoshao/index.json");
  zhuanyejiaoshaoDatess = data;
  hideFun();
})();
(async (v) => {
  const { data } = await axiosFun().post("/JSON/zhuanyetese/index.json");
  zhuanyeteseDates.value = data;
})();
(async (v) => {
  const { data } = await axiosFun().post("/JSON/zhuanyekecheng/index.json");
  zhuanyekechengDates.value = data;
})();
</script>
<style scoped>
.intro-duce {
  width: 100%;
  height: auto;
  margin-bottom: 3rem;
}
.to {
  width: 14.5rem;
  height: auto;
  margin: 0.2rem auto 0;
}
.introduce_title {
  width: 100%;
  height: 1.5rem;
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.5rem;
  color: #666;
  margin-top: 0.4rem;
}
.introduce {
  width: 100%;
  height: auto;
  margin-bottom: 1rem;
}
.introduce_top {
  width: 100%;
  height: auto;
}
.introduce_top > img {
  width: 100%;
  height: 6rem;
}
.introduce_top > span {
  display: block;
  width: 100%;
  font-size: 0.4rem;
  color: #666;
}
.introduce_bot {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
}
.introduce_bot > div {
  width: 7rem;
  height: auto;
}
.introduce_bot > div > img {
  width: 100%;
  height: 4rem;
}
.introduce_bot > div > span {
  display: block;
  width: 100%;
  font-size: 0.4rem;
  color: #666;
}
.ico {
  width: 100%;
  height: 1rem;
  margin-top: 1rem;
  text-align: center;
}
.clickConsulting {
  width: 10rem;
  height: 1.4rem;
  background-color: orange;
  text-align: center;
  line-height: 1.4rem;
  font-size: 0.6rem;
  margin: 0.4rem auto 0;
  border-radius: 0.4rem;
}
.clickConsulting a {
  color: #fff;
}
.characteristic {
  width: 100%;
  height: auto;
}
.characteristic_Con1box {
  width: 100%;
  height: 4.3rem;
  padding: 0.2rem;
  box-sizing: border-box;
  border: 0.001rem solid #ccc;
  display: flex;
  justify-content: space-between;
}
.characteristic_Con1box_one {
  width: 8rem;
  height: 4rem;
}
.characteristic_Con1box_one img {
  width: 100%;
  height: 100%;
}
.characteristic_Con1box_two {
  width: 5.8rem;
  height: 100%;
}
.characteristic_Con1box_two > p {
  width: 100%;
  font-size: 0.4rem;
}
.characteristic_Con1box_two > span {
  font-size: 0.4rem;
  display: block;
  width: 100%;
  color: #666;
}
.characteristic_Con1box_two > a {
  display: block;
  width: 5rem;
  height: 1rem;
  background-color: orange;
  text-align: center;
  line-height: 1rem;
  font-size: 0.4rem;
  color: #fff;
  border-radius: 0.4rem;
  margin-top: 0.4rem;
}
.characteristic_Con1box_list {
  width: 100%;
  height: auto;
  margin-top: 0.4rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.characteristic_Con1box_list1 {
  width: 7rem;
  height: 3.4rem;
  border: 0.001rem solid #ccc;
  display: flex;
  justify-content: space-between;
  padding: 0.2rem;
  box-sizing: border-box;
  margin-bottom: 0.4rem;
}
.characteristic_Con1box_list1 > img {
  width: 4rem;
  height: 3rem;
}
.characteristic_Con1box_list1 > div {
  width: 3rem;
  height: 100%;
  padding-left: 0.2rem;
  box-sizing: border-box;
}
.characteristic_Con1box_list1 > div > span {
  display: block;
  font-size: 0.4rem;
  color: #0199ed;
  width: 100%;
}
.characteristic_Con1box_list1 > div > a {
  display: block;
  width: 2.5rem;
  height: 1rem;
  border-radius: 0.4rem;
  background-color: orange;
  color: #fff;
  font-size: 0.4rem;
  line-height: 1rem;
  text-align: center;
  margin-top: 0.2rem;
}
.curriculum_Box1 {
  width: 100%;
  height: 13.5rem;
  margin-top: 0.6rem;
}
.curriculum_Box1_link {
  width: 100%;
  height: 1.6rem;
  background: #f2f2f5;
  margin-bottom: 0.4rem;
  display: flex;
  justify-content: space-between;
}
.curriculum_Box1_link span {
  display: block;
  width: 4rem;
  height: 100%;
  line-height: 1.6rem;
  color: #666;
  text-align: center;
  font-size: 0.6rem;
}
.curriculum_Box1_link > .span {
  background: #fff;
  color: #000;
}
.curriculum_Box1_view {
  width: 100%;
  height: auto;
}
.curriculum_Box1_view > img {
  width: 100%;
  height: 5rem;
}
.curriculum_Box1_view > p {
  width: 100%;
  line-height: 1rem;
  font-size: 0.8rem;
  text-align: center;
  color: #666;
  margin: 0.4rem 0;
}
.curriculum_Box1_view > span {
  display: block;
  padding: 0 0.4rem;
  box-sizing: border-box;
  width: 100%;
  line-height: 1rem;
  font-size: 0.5rem;
  color: #666;
  letter-spacing: 0.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
</style>